<template>
	<view>
		<cu-custom bgColor="bg-grey light" :isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">及格成绩</view>
		</cu-custom>

		<loginModal :showLoginModal.sync="isLoginModalShow" @changes="loginModalConfirm"></loginModal>

		<view class="flex justify-center padding-sm text-center">
			<view :class="'load-progress ' + (loadProgress != 0 ? 'show' : 'hide')" :style="'top:' + CustomBar + 'px;'">
				<view class="load-progress-bar bg-green"
					:style="'transform: translate3d(-' + (100 - loadProgress) + '%, 0px, 0px);'"></view>
			</view>

			<view class="margin-lr-sm">
				<button class="line-orange cu-btn" role="button" :aria-disabled="false">
					<picker @change="termChange" :value="termIndex" :range="termArray">
						<text class="text-df margin-right-sm">{{ termArray[termIndex] }}</text>
					</picker>
					<text class="cuIcon-rounddown"></text>
				</button>
			</view>

			<button :class="'cu-btn line-pink round icon ' + (isLoad ? 'loading' : '')" @tap="refresh">
				<text class="cuIcon-loading"></text>
			</button>
		</view>

		<view class="flex">
			<view class="flex-sub bg-brown light solid-right text-df text-white padding" style="width: 16rpx">
				<text>序号</text>
			</view>
			<view class="text-df bg-brown light padding grid col-4 text-center solid-left"
				style="color: black; flex: 9">
				<view>名字</view>
				<view @tap="sortByGap">
					学分
					<text
						:class="' margin-left-sm cuIcon-' + (sortGap == 1 ? 'move' : [sortGap == 2 ? 'unfold' : 'fold'])"></text>
				</view>
				<view>类型</view>
				<view @tap="sortByScore">
					分数
					<text
						:class="' margin-left-sm cuIcon-' + (sortScore == 1 ? 'move' : [sortScore == 2 ? 'unfold' : 'fold'])"></text>
				</view>
			</view>
		</view>

		<view wx-for-index="index" class="flex solid-bottom" v-for="(item, index) in chengjiArr" :key="item.key">
			<view class="flex-sub bg-grey light solid-right text-df text-white padding" style="width: 16rpx">
				<text>{{ index + 1 }}</text>
			</view>

			<view class="text-sm text-grey bg-white light padding grid col-4 text-center solid-left solid-bottom"
				style="flex: 9">
				<view>{{ item['courseName'] }}</view>
				<view>{{ item['credit'] ? item['credit'] : '-' }}</view>
				<view>{{ item['courseAttributeName'] ? item['courseAttributeName'] : '-' }}</view>
				<view>{{ item['cj'] }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/linian/index.js
	const app = getApp();
	import {
		getChengJi
	} from '../../utils/getChengJi.js'
	import loginModal from '@/pages/login-modal/index'
	export default {
		components: {
			loginModal,
		},
		data() {
			return {
				CustomBar: app.globalData.CustomBar,
				termArray: ['正在获取', ''],
				chengjiArr: '',
				termIndex: 0,
				loadProgress: 0,
				isLoad: false,
				sortGap: true,
				sortScore: true,
				allScore: [],
				isLoginModalShow: false,
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			let that = this;
			uni.getStorage({
				key: 'userID',
				fail() {
					uni.redirectTo({
						url: '/pages/login/index'
					});
				},
				success() {
					that.getTerm();
				}
			});
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			loginModalConfirm(e) {
				this.refresh()
			},
			
			
			termChange(e) {
				this.setData({
					termIndex: e.detail.value
				});
				this.changeChengJi(e.detail.value);
			},

			refresh() {
				this.getTerm();
				this.changeChengJi(this.termIndex);
			},

			loadProgressFun() {
				this.setData({
					loadProgress: this.loadProgress + 3
				});

				if (this.loadProgress < 100) {
					setTimeout(() => {
						this.loadProgressFun()
					}, 100);
				} else {
					this.setData({
						loadProgress: 0
					});
				}
			},

			async getTerm() {
				this.loadProgressFun()
				this.setData({
					isLoad: true
				});
				let that = this;
				uni.showLoading({
					title: '正在获取成绩'
				});
				
				let res = await getChengJi()
				console.log(res)
				uni.hideLoading()
				if (res == null) {
					that.showLoginModal();
					that.setData({
						isLoad: false
					});
					return
				}
				
				uni.showToast({
					title: '获取成功'
				});
				
				that.setData({
					isLoad: false,
					loadProgress: 100,
					allScore: res.allScore
				});
				let termArray = [];
				let len = that.allScore.length;
				
				for (var i = 0; i < len; i++) {
					termArray.push(that.allScore[i]['cjbh']);
				}
				
				that.setData({
					termArray: termArray,
					termIndex: len - 1
				});
				that.changeChengJi(len - 1);

			},

			showLoginModal() {
				this.setData({
					isLoginModalShow: true
				});
			},

			changeChengJi: function(n) {
				console.log(n);
				this.setData({
					isLoad: false,
					loadProgress: 100,
					chengjiArr: this.allScore[n]['cjList'],
					sortGap: 1,
					sortScore: 1
				});
			},

			sortByGap() {
				this.setData({
					sortScore: 1
				});

				if (this.sortGap == 1) {
					this.setData({
						//降序
						sortGap: 2,
						chengjiArr: this.chengjiArr.sort(function(x, y) {
							return y['gradePointScore'] - x['gradePointScore'];
						})
					});
				} else if (this.sortGap == 2) {
					this.setData({
						//升序
						sortGap: 3,
						chengjiArr: this.chengjiArr.sort(function(x, y) {
							return x['gradePointScore'] - y['gradePointScore'];
						})
					});
				} else {
					this.setData({
						sortGap: 2,
						//降序
						chengjiArr: this.chengjiArr.sort(function(x, y) {
							return y['gradePointScore'] - x['gradePointScore'];
						})
					});
				}
			},

			sortByScore() {
				this.setData({
					sortGap: 1
				});

				if (this.sortScore == 1) {
					this.setData({
						//降序
						sortScore: 2,
						chengjiArr: this.chengjiArr.sort(function(x, y) {
							return y['cj'] - x['cj'];
						})
					});
				} else if (this.sortScore == 2) {
					this.setData({
						//升序
						sortScore: 3,
						chengjiArr: this.chengjiArr.sort(function(x, y) {
							return x['cj'] - y['cj'];
						})
					});
				} else {
					this.setData({
						sortScore: 2,
						//降序
						chengjiArr: this.chengjiArr.sort(function(x, y) {
							return y['cj'] - x['cj'];
						})
					});
				}
			}
		}
	};
</script>
<style>
	@import './index.css';
</style>
